<template>
    <div class="footer-wrap">
        <el-form
            v-for="(item, index) in footerInitList"
            :model="footerInitList[index]"
            :key="index"
            :ref="el=>itemFormRefs[`footerForm${index}`] = el"
            :rules="formRules"
            class="footer-item">
                <el-form-item class="inline-form" label=""
                    prop="footerName">
                    <el-input v-model.trim="footerInitList[index].footerName"
                        style="width:250px"
                        placeholder="显示项目名称，如：研修网电话"
                        maxlength="30"
                        clearable
                        @input="changeValue" />
                </el-form-item>
                <el-form-item class="inline-form" label=""
                    prop="footerValue">
                    <el-input class="link-address"
                        style="width:250px"
                        v-model.trim="footerInitList[index].footerValue"
                        placeholder="请输入内容，如：010-6223455"
                        maxlength="200"
                        clearable
                        @input="changeValue" />
                </el-form-item>
                <el-button class="del-btn" v-if="index > 0"
                    @click="handleDel(index)">删除</el-button>
        </el-form>
        <el-button
            v-if="footerInitList.length < 6"
            class="btn"
            type="default"
            @click="addFooter">+添加</el-button>
    </div>
</template>

<script setup>
import { ref, onMounted, defineExpose, defineProps, defineEmits, watchEffect, nextTick } from 'vue';
import Fn from '@/lib/fn.js';

defineExpose({
    checkForm
})

const props = defineProps({
    footerList: {
        type: Array,
        default: () => {
            return [];
        }
    }
})

const emit = defineEmits(['update:footer-list']);

const footerInitList = ref([{
    footerName: '',
    footerValue: ''
}]);

// 动态表单的ref集合
const itemFormRefs = {};

const formRules = {
    footerName: [
        {
            required: true,
            message: '请输入项目名称，如：研修网电话',
            trigger: 'blur'
        }
    ],
    footerValue: [
        {
            required: true,
            message: '请输入内容，如：010-6223455',
            trigger: 'blur'
        }
    ]
}


onMounted(() => {
    handleData();
})

watchEffect(() => {
    handleData();
})

// 设置数据，重置校验
function handleData () {
    footerInitList.value = Object.assign([], props.footerList.length && props.footerList || [{ footerName: '', footerValue: ''}, { footerName: '', footerValue: ''}]);
    nextTick(() => {
        footerInitList.value.map((item, index) => {
            itemFormRefs[`footerForm${index}`].clearValidate();
        })
    })
}



function addFooter (name) {
    footerInitList.value.push({ footerName: '', footerValue: '' });
    changeValue();
}

function handleDel (index) {
    Fn.Confirm(function(){
        footerInitList.value.splice(index, 1);
        emit('update:footer-list', footerInitList.value);
    }, '确认要删除这条底部信息吗？', '确认删除')();
}

function validate (ref) {
    return new Promise((resolve, reject) => {
        itemFormRefs[ref] && itemFormRefs[ref].validate(valid => {
            if (valid) {
                resolve(true);
            } else {
                resolve(false);
            }
        });
    });
}

function changeValue () {
    emit('update:footerList', footerInitList.value);
}

// 校验是否符合条件
async function checkForm () {
    let checkType = true;
    console.log(footerInitList, 'footerInitList');
    await Promise.all(footerInitList.value.map(async (item, index) => {
        if (item.footerName || item.footerValue) {
            let formValid = await validate(`footerForm${index}`);
            checkType = checkType && formValid;
        }
    }));
    return checkType;
}
</script>

<style lang="scss">
.footer-wrap {
    .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before{
        display: none;
    }
    .el-form-item{
       margin-bottom: 0px !important;
    }
}

</style>

<style lang="scss" scoped>
.footer-wrap {
    padding-bottom: 20px;
    .footer-item {
        display: flex;
        align-items: center;
        margin-bottom: 4px;
        margin-bottom: 20px;
        box-sizing: border-box;
        .pointer {
            width: 8px;
            height: 13px;
            margin-right: 25px;
            visibility: hidden;
            transition: all ease 0.2s;
            &:hover {
                cursor: all-scroll;
            }
        }
        .inline-form {
            width: 250px;
            margin-right: 10px;
        }
    }
    .del-btn {
        margin-left: 20px;
        min-height:30px !important;
        padding: 8px 12px;
        border-radius: 2px;
        border: 1px solid var(--color-primary);
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: var(--color-primary);
        line-height: 14px;
    }
    .btn {
        min-height: 30px !important;
        padding: 8px 12px;
        border-radius: 2px;
        border: 1px solid #1F6FFF;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #1F6FFF;
        line-height: 14px;
        margin-top: 6px;
        
    }
}
</style>